<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">

<head>
<meta charset="UTF-8">
<title>耶誕卡片</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>

<body>
<div id="page">
        <div class="header FixedTop">
            <a href="#menu" class="headericon"></a>
            <img src="images/logo.png" alt="proactive Logo">
        </div><!-- header -->
        <div class="content">
            <div class="list-screen clearfix">
                <div class="navfull">
                    <div class="container neck-in">
                        <div class="grid_12 neck-in">
                            <div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>										
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="zoneAll clearfix">
                <div class="zone1 clearfix">
                
                    <div class="personalinformationimg clearfix">
                        <img src="${member.photoPath}">
                    </div>
                    <div class="personalinformationp">
                        <p>${member.name}</p>
                        <p>${member.job}</p>
                        <p>
                            <a href="memberFans?id=${member.memberNO}">
                            	<span class="fansCount" id="fansCount">${member.fansCount}</span>粉絲
                            </a>
                            <a href="memberFollow?id=${member.memberNO}">
                            	${member.followCount}關注
                            </a>
                        </p>
                        <c:if test="${!member.myselfFlag}">
                        <ul class="${member.memberFollowClass} clearfix">
							<li>
								<a href="javascript:;" class="memberFollow" data-id="${member.memberNO}" data-show="${member.followFlag}" data-check="true">
									<span></span>${member.followString}
								</a>
							</li>
						</ul>
						</c:if>
                    </div>

                    <ul class="leftnav">
                        <li>
                            <a href="aboutme?id=${member.memberNO}">
                                <img src="images/aboutme.png">關於我</a>
                        </li>
                        <li>
                            <a href="memberCourse?id=${member.memberNO}">
                                <img alt="" src="images/mycreation.png">我創作</a>
                        </li>
                        <li>
                            <a href="collectCourse?id=${member.memberNO}">
                                <img alt="" src="images/mystar.png">我收藏</a>
                        </li>
                        <li class="current">
                            <a href="memberCard?id=${member.memberNO}">
                                <img alt="" src="images/xmas.png">耶誕卡片</a>
                        </li>
                        <!-- 
                        <li>
                            <a href="membernewswall.html">
                                <img alt="" src="images/mynew.png">動態牆</a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img alt="" src="images/myactivity.png">活動</a>
                        </li> 
                        -->
                    </ul>
                </div>
                <div class="memberRwdnav clearfix">
                    <nav class="primary">
                        <ul class="rightnav">
                            <li>
                                <a href="aboutme?id=${member.memberNO}">關於我</a>
                            </li>
                            <li>
                                <a href="memberCourse?id=${member.memberNO}">我創作</a>
                            	<ul>
									<li><a href="memberCourse?id=${member.memberNO}">我創作-課程</a></li>
									<li><a href="memberDesign?id=${member.memberNO}">我創作-作品</a></li>
									<li><a href="memberWorksheet?id=${member.memberNO}">我創作-學習單</a></li>
									<li><a href="memberResource?id=${member.memberNO}">我創作-設計資源</a></li>
								</ul>
                            </li>
                            <li>
                                <a href="collectCourse?id=${member.memberNO}">我收藏</a>
                            	<ul>
									<li><a href="collectCourse?id=${member.memberNO}">我收藏-課程</a></li>
									<li><a href="collectDesign?id=${member.memberNO}">我收藏-作品</a></li>
									<li><a href="collectWorksheet?id=${member.memberNO}">我收藏-學習單</a></li>
									<li><a href="collectResource?id=${member.memberNO}">我收藏-設計資源</a></li>
								</ul>
                            </li>                          
                            <li>
                                <a href="memberCard?id=${member.memberNO}">
                                    <img alt="" src="images/mystar.png">耶誕卡片</a>
                            </li> 
                        </ul>
                    </nav>
                    <c:if test="${member.myselfFlag}">
                    <ul class="navbarright">
                        <li><!-- <a href="showActivity" class="addTopButton">製作卡片</a> -->
                        </li><!-- 
                        <li>
                            <a href="javascript:;" class="addTopButton">
                            <img src="images/edit.png">管理課程</a>
                        </li> -->
                    </ul>
                    </c:if>
                </div>
                <div class="zone2 clearfix">
                	<div class="membernavhide">
	                    <div class="title">
	                        <img alt="耶誕卡片" src="images/xmasbig.png">
	                        <span>耶誕卡片</span>
	                    </div>
	                    <div class="navbar">
	                        <ul class="navbarright">
	                            <li><!-- <a href="showActivity" class="addTopButton">製作卡片</a> -->
	                            </li><!-- 
	                            <li>
	                                <a href="javascript:;" class="addTopButton">
	                                    <img src="images/edit.png">管理課程</a>
	                            </li> -->
	                        </ul>
	                    </div>
                    </div>
                    <div class="courseList editmembercreation">
                        <ul>
                        <c:forEach items="${cardList}" var="card">
                        	<li class="zone3">
                                <div class="courseBox ${card.hideClass}">
                                    <div class="editcreation clearfix">
                                    	<c:if test="${member.myselfFlag}">
                                    	<ul class="navedit">
                                            <li class="box-title">
                                                <a href="javascript:;">
                                                    <img alt="" src="images/editBlack.png"  class="box-title">
                                                    <img alt="" src="images/editWhite.png" class="box-title2" style="display:none;">
                                                </a>
                                                <ul class="editDropdown ">
                                                    <li><a href="modiCardCont?id=${card.id}" class="box-txt">編輯</a></li>
                                                    <li><a href="javascript:;" class="box-txt actBtn" data-id="${card.id}" data-act="delete">刪除</a></li>
                                                    <li><a href="javascript:;" class="box-txt actBtn" data-id="${card.id}" data-act="${card.actClass}">${card.actString}</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                      	</c:if>
                                        <a href="showCard?id=${card.id}" class="courseBoxImg">
                                            <img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${card.imagePath}" alt="${card.title}">
                                        </a>
                                    </div>
                                    <a href="showCard?id=${card.id}" class="courseBoxTitle">
                                    <c:if test="${card.status==2}">
                                    	<span class="edithideSpan">隱藏中</span>
                                    </c:if> 
                                    	${card.title}
                                    </a>
                                </div>
                            </li>
                        </c:forEach>
                            
                        </ul>
                    </div>
                    <!-- courseList -->

                    <div class="page clearfix">
						<ul>
							<c:forEach items="${page.pagerList}" var="pager">
								<li class="${pager.indexClass}"><a href="${pager.url}">${pager.index}</a></li>
							</c:forEach>			
			            </ul>
			        </div><!-- page -->
                </div>
                <!-- zone2 -->
            </div>
            <!-- zoneAll -->
        </div>
        <!--content -->
        
        <!-- 左側meum滑出 -->
        <nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach> 		
				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
    </div><!-- page -->
    
    <form id="actForm" method="post" action="actCard">
    	<input type="hidden" id="id" name="id">
    	<input type="hidden" id="act" name="act">
    </form>

    <!-- import jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    

    <!-- some jquery method we use -->
    <script src="js/hoverjquery.js"></script>
    <script src="js/listscreen.js"></script>        
    <script src="js/ourjquery.js"></script> 
    <!-- rwdmenu -->
    <script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<!-- common -->
    <script src="js/common.js"></script>    
    <script type="text/javascript">
        $(function() {
            $('nav#menu').mmenu();
            $(".actBtn").click(function(){
            	var act = $(this).attr("data-act");
            	var id = $(this).attr("data-id");
            	var msg = "";
            	var flag;
            	if(act == "show")
            		msg = "是否顯示?";
            	else if(act == "hide")
            		msg = "是否隱藏?";
            	else if(act == "delete")
            		msg = "是否刪除?";
            	var flag = confirm(msg);
            	if(flag){
                	$("#id").val(id);
                	$("#act").val(act);
                	$("#actForm").submit();
            	}
            });
        });
    </script>
    
    
    <script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
    <script type="text/javascript">
        $(function() {
            $('nav.primary .rightnav').mobileMenu();
            
        });
     </script>
</body>

</html>